<template>
	<view class="postDetail">
		<PostItem :id="postDetail.id" :title="postDetail.title" :content="postDetail.content"
			:username="postDetail.username" :likeNum="postDetail.likeNum" :commentNum="postDetail.commentNum上"
			:avatarUrl="postDetail.avatarUrl" :date="postDetail.date" :ifDetail="true" :ifAudit="ifAudit"
			:imgUrls="postDetail.imgUrls" v-if="isReady" :ifMine='postDetail.ifMine' :statu='postDetail.statu'
			:type="postDetail.type" :clubName="postDetail.clubName" />
		<view v-if="!ifAudit || postDetail.statu !== 'audit'">
			<CommentList :source="commentList" :authorId='postDetail.UserId' />
			<view class="newComment" v-if="useUser.userInf.role !== 'warn'">
				<NewComment :postId="routeParams.id" @submit="requestPostComments" :username="postDetail.username" />
			</view>
		</view>
		<van-popup :show="isShowPop" position="bottom" @click-overlay='onClose' custom-style="background-color:#f8f8f8;border-top-right-radius: 20rpx;
			border-top-left-radius: 20rpx;">
			<view class="conPop">
				<view class="bthDeleteComment" @click="deleteComment"
					v-if="useUser.userInf.id == tempCommentMsg.UserId || useUser.userInf.role === 'jyu_admin'">
					删除评论
				</view>
				<view class="bthCopyComment" @click="copyComment">复制评论</view>
				<view v-if="useUser.userInf.role === 'jyu_admin'&&useUser.userInf.id !== tempCommentMsg.UserId" class="bthCopyComment" @click="warnUser"
					style="color: red;">封禁该用户</view>
				<view class="bthCancel" @click="onClose">取消</view>
			</view>
		</van-popup>
	</view>
</template>

<script setup>
import {
	onMounted,
	ref,
	reactive,
	provide
} from "vue";
import {
	onLoad
} from "@dcloudio/uni-app";
import PostItem from "@/pages/index/components/PostItem.vue";
import CommentList from "./components/CommentList.vue";
import NewComment from "./components/NewComment.vue";
import {
	getPostDetail,
	getPostComments,
	deleteComments,
	editUserRole
} from "@/apis/apis";
import {
	getFileTemp
} from "@/utils/cloud.js";
import {
	useCommentStore,
	useUserStore
} from "@/store";
const useComment = useCommentStore()
const useUser = useUserStore()
let postDetail = reactive({});
let routeParams = reactive({});
const pageParams = reactive({
	page: 1,
	pageSize: 30,
});
// const fileId = ref([
// 	"cloud://prod-5gduafzd5d123d73.7072-prod-5gduafzd5d123d73-1326429543/postImg/1730213800103.png",
// 	"cloud://prod-5gduafzd5d123d73.7072-prod-5gduafzd5d123d73-1326429543/postImg/1730213852961.png",
// 	"cloud://prod-5gduafzd5d123d73.7072-prod-5gduafzd5d123d73-1326429543/postImg/1730213852961.png",
// ]);
// const imgList = ref([]);

onLoad((options) => {
	console.log(options)
	options.props = JSON.parse(decodeURIComponent(options.props))
	routeParams = {
		...options
	};
	useComment.setTarget('', routeParams.id, null)

});
const ifAudit = ref(false)
onMounted(() => {
	//做数据处理
	requestDetail();
	console.log(routeParams, '00p');
	ifAudit.value = routeParams.props.ifAudit
	requestPostComments();
	// getFileTemp(fileId.value)
	// 	.then((tempFileURLs) => {
	// 		console.log("临时链接:", tempFileURLs);
	// 		imgList.value = tempFileURLs;
	// 	})
	// 	.catch((error) => {
	// 		console.error("获取临时链接出错:", error);
	// 	});
});
const isReady = ref(false)
const requestDetail = () => {
	getPostDetail({
		id: routeParams.id,
	}).then((res) => {
		if (res.status === 200) {
			Object.assign(postDetail, res.data);
			postDetail.ifMine = routeParams.props.ifMine
			console.log('展示吧', postDetail.UserId)
			console.log('sdgsdf', res.data)
			isReady.value = true //确保有数据传入item，才可判断内容是否需要折叠/展开
		} else if (res.status === 404) {
			uni.showToast({
				title: "该帖子已被删除"
			})
		}
	}).catch(err => {
		console.log(err)
	})
};
const commentList = ref([]);
const requestPostComments = () => {
	getPostComments({
		postId: routeParams.id,
		page: pageParams.page,
		pageSize: pageParams.pageSize,
	}).then((res) => {
		console.log(res)
		if (res.status === 200) {
			commentList.value = res.comments;
		}
	});
};
let timeOut = null
const isShowPop = ref(false)
let tempCommentMsg = reactive({
	UserId: 0
})
const propsFunction = {
	touchStart(comment) {
		tempCommentMsg = comment
		console.log(tempCommentMsg)
		timeOut = setTimeout(() => {
			isShowPop.value = true
		}, 500)
	},
	touchEnd() {
		clearTimeout(timeOut)
	}
}
provide('propsFunction', propsFunction)
const deleteComment = () => {
	isShowPop.value = false
	console.log(1111)
	uni.showModal({
		content: "删除此评论?",
		success: function (res) {
			if (res.confirm) {
				uni.showLoading({
					title: "加载中",
				});
				deleteComments({
					commentId: tempCommentMsg.id
				}).then((res) => {
					console.log(res)
					if (res.status === 200) {
						useComment.setCurrentParentId(tempCommentMsg.parentId)
						if (!tempCommentMsg.parentId) {
							pageParams.page = 1
							requestPostComments()
						} else {
							useComment.deleteSonComment()
						}
						uni.showToast({
							icon: 'none',
							title: '删除成功'
						});
					}
				})
			} else if (res.cancel) {
				console.log("用户点击取消");
			}
		},
		fail: function (err) {
			console.log(err)
		}
	});
}
const onClose = () => {
	isShowPop.value = false
}
const copyComment = () => {
	const copyData = tempCommentMsg.User.username + ' : ' + tempCommentMsg.content
	wx.setClipboardData({
		data: copyData,
		success: function (res) {
			isShowPop.value = false
			uni.showToast({
				title: '复制成功',
				icon: 'none',
			})
		}
	});
}
const warnUser = () => {
	console.log(tempCommentMsg.User,'s');

	uni.showModal({
		title: '警告',
		content: `你确定要封禁 ${tempCommentMsg.User.username} 用户吗？操作后只能在后台接触封禁状态`,
		success: () => {
			editUserRole({
				id: tempCommentMsg.User.id,
				role: 'warn'
			}).then(res => {
				if (res.status === 200) {
					uni.showToast({
						title: '封禁成功',
						icon: 'none'
					})
				}
			})
		}
	})

}
</script>
<style lang="less" scoped>
.postDetail {
	width: 750rpx;
	min-height: 100vh;
	overflow: hidden;
	background-color: white;

	.newComment {
		position: fixed;
		width: 100%;
		bottom: 0;
		left: 0;
	}

	.conPop {
		background-color: #fff;
		width: 750rpx;

		.bthDeleteComment {
			border-bottom: 0.4rpx rgba(151, 151, 151, 0.3) solid;
		}

		.bthCancel {
			border-top: 20rpx solid #f7f7f7;
		}

		.bthDeleteComment,
		.bthCopyComment,
		.bthCancel {
			color: black;
			font-weight: 550;
			background-color: #fff;
			height: 90rpx;
			font-size: 33rpx;
			line-height: 90rpx;
			text-align: center;

			&:active {
				background-color: #e5e5e5;
			}
		}

	}
}
</style>